/*
 * @Title: 取消原因
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="cancelBox">
			<view class="qxyyTop">
				<view class="title">预订订单已为您取消</view>
				<text>为方便商家及时安排其他预订顾客</text>
				<text>下次在早一点哦</text>
			</view>
			<view class="labelBox">
				<radio-group @change="radioChange">
					<label 
					v-for="(item,index) in radioItems" 
					:key="index"
					class="labelList">
						<view>
							<radio
							:id="item.name" :value="item.name" style="transform: scale(0.7);"></radio>
						</view>
						<view>
							<label :for="item.name">
								  <text>{{item.value}}</text>
							</label>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="botmBox" @tap="curTc">
				<view class="botmBtn" @tap="goYuDing3" :class="isBlueBg ? 'blueBg' : ''">
					<view>提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:0,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#333333',
						leftTextColor:'',
					},
					mid:{
						isShowMid:true,
						text:'取消原因'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				radioItems:[
					{
						value:'不想去了',
						name:'0'
					},
					{
						value:'订单信息有误，需重新下单',
						name:'1'
					},
					{
						value:'反馈太慢了，等不及了',
						name:'2'
					},
					{
						value:'已通过其他方式预订成功',
						name:'3'
					},
					{
						value:'其它',
						name:'4'
					}
				],
				isBlueBg:false,//按钮背景颜色参数
			}
		},
		methods:{
			radioChange(e){
				console.log(e);
				if(e){
					this.isBlueBg = true
				}else{
					this.isBlueBg = false
				}
			},
			curTc(){
				uni.showModal({
					title:'已收到您的反馈',
					content:'是否需要重新预订改餐厅？',
					cancelText:'暂不预订',
					confirmText:'重新预订',
					confirmColor:'#4A86D5',
					success:function(res){
						if(res.confirm){
							uni.redirectTo({
								url:'/pages/home/food/yuding1'
							})
							console.log('用户点击确定');
							
						}else if(res.cancel){
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cancelBox{
		padding:172upx 0 120upx 0;
	}
	.qxyyTop{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom:40upx;
	}
	.qxyyTop .title{
		font-size: 30upx;
		color: #333333;
		margin-bottom:15upx;
		
	}
	.qxyyTop text{
		color: #558BE3;
		font-size: 24upx;
	}
	.labelBox{
		width:100%;
		height:20upx;
		border-rop:20upx solid #F0F0F0;
		font-size: 26upx;
		color: #333333;
	}
	.labelList{
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 70upx;
		margin:0 20upx;
	}
	.labelList view:first-child{
		margin-right: 20upx;
	}
	/* 底部按钮 */
	.botmBox{
		background: #FFFFFF;
		padding: 20upx 0;
		width: 100%;
		position: fixed;
		bottom:0upx;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.botmBtn{
		width:714upx;
		height:80upx;
		line-height:80upx;
		border-radius: 80upx;
		box-shadow: 0px 0px 27px 0px rgba(5,36,72,0.15);
		background:#CCCCCC;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding:10upx 0upx;
		box-sizing: border-box;
		text-align: center;
	}
	.botmBtn > view{
		font-size: 28upx;
	}
	.blueBg{
		background: linear-gradient(to bottom,#4C89D8,#2A60BA);
	}
</style>
